<template>
  <div class="selectTime-page">
    <van-nav-bar title="选择时间" left-arrow @click-left="onClickLeft">
      <span class="btn" slot="right" @click="onClickRight">完成</span>
    </van-nav-bar>
    <div>
      <div class="current-bar">{{formatMonth(pickerDayDate)}}</div>
      <van-datetime-picker
        v-model="pickerDayDate"
        type="year-month"
        :show-toolbar="false"
        :max-date="maxDate"
        :visible-item-count="7"
      />
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { NavBar, DatetimePicker, Toast } from "vant";
import { format } from "@/utils/util";

Vue.use(DatetimePicker).use(NavBar);
export default {
  data() {
    return {
      maxDate: new Date(),
      pickerDayDate: this.$route.query.monthStr ? new Date(this.$route.query.monthStr) : new Date()
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$store.commit('rewardPoints/SET_DATE', this.pickerDayDate)
      this.onClickLeft()
    },
    
    jumpLink(path) {
      this.$router.push(path);
    },
    formatMonth(time) {
      return format(time, "yyyy-MM");
    },
  }
};
</script>
<style lang="scss" scoped>
.selectTime-page {
  height: 100vh;
  background: $bg-clr;
  .btn {
    color: $primary-clr;
  }
  .current-bar{
    text-align: center;
    color: $primary-clr;
    font-size: 14px;
    margin: 20px 12px ;
    padding: 12px 0;
    border-bottom: 1px solid $primary-clr;
  }
}
</style>